<template>
    <div class="blogger-list-page">
        <div class="bg-box"></div>
        <div class="page-inner">
            <p class="page-title">山海边的博客</p>
            <ul class="blogger-box">
                <li class="blogger-li">
                    <span class="title">html+css:</span>
                    <a href="http://note.youdao.com/noteshare?id=068e2c2249bfefbe9a78c23e23ad7f36" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=068e2c2249bfefbe9a78c23e23ad7f36</a>
                </li>
                <li class="blogger-li">
                    <span class="title">JS:</span>
                    <a href="http://note.youdao.com/noteshare?id=246664bd3de72e04a6991f5f11c8d99e" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=246664bd3de72e04a6991f5f11c8d99e</a>
                </li>
                <li class="blogger-li">
                    <span class="title">React:</span>
                    <a href="http://note.youdao.com/noteshare?id=b9cd46de2fea85fd5663d5fe84885210" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=b9cd46de2fea85fd5663d5fe84885210</a>
                </li>
                <li class="blogger-li">
                    <span class="title">Vue的md笔记:</span>
                    <a href="http://note.youdao.com/noteshare?id=cdd7e954355733cf37b00ea21bd582e5" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=cdd7e954355733cf37b00ea21bd582e5</a>
                </li>
                <li class="blogger-li">
                    <span class="title">小程序开发:</span>
                    <a href="http://note.youdao.com/noteshare?id=1a54b1547ea9596efd241d3a04617bfb" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=1a54b1547ea9596efd241d3a04617bfb</a>
                </li>
                <li class="blogger-li">
                    <span class="title">面试题:</span>
                    <a href="http://note.youdao.com/noteshare?id=c43e164497cf7afaed22bb1f401a386a" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=c43e164497cf7afaed22bb1f401a386a</a>
                </li>
                <li class="blogger-li">
                    <span class="title">webpack:</span>
                    <a href="http://note.youdao.com/noteshare?id=cdcf195cf6762e2314720ec381f4ac5c"  target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=cdcf195cf6762e2314720ec381f4ac5c</a>
                </li>
                <li class="blogger-li">
                    <span class="title">express 脚手架:</span>
                    <a href="http://note.youdao.com/noteshare?id=9d75529c6d5c2794a40be6f48b4c8549"  target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=9d75529c6d5c2794a40be6f48b4c8549</a>
                </li>
                <li class="blogger-li">
                    <span class="title">webserver创建web服务:</span>
                    <a href="http://note.youdao.com/noteshare?id=466194fa06782025abb495da9634b7d1"  target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=466194fa06782025abb495da9634b7d1</a>
                </li>
                <li class="blogger-li">
                    <span class="title">gulp:</span>
                    <a href="http://note.youdao.com/noteshare?id=d2ea5933752d626fa2e52fa7c19b972a"  target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=d2ea5933752d626fa2e52fa7c19b972a</a>
                </li>
                <li class="blogger-li">
                    <span class="title">其他:</span>
                    <a href="http://note.youdao.com/noteshare?id=74302ac864bf2bcb3fe72abdc1d8a338" target="_blank" class="blogger-url">http://note.youdao.com/noteshare?id=74302ac864bf2bcb3fe72abdc1d8a338</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'blogger',
    data(){
        return{}
    },
    watch:{},
    mounted(){},
    methods:{}
}
</script>

<style lang="less" scoped>
.blogger-list-page {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #F0F2F5;
  padding: 20px;
  .bg-box {
    width: 100%;
    height: 427px;
    background-image: url("../../../static/images/bg_title.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: -132px;
    z-index: 1;
  }
  .page-inner{
    position: relative;
    z-index: 10;
    background-color: #fff;
    z-index: 10;
    height: 100%;
    border-radius: 8px;
    padding: 20px;
    .page-title{
        text-align: center;
    }
    .blogger-box{
        .blogger-li{
            height: 38px;
            line-height: 38px;
            .title{
                display: inline-block;
                font-size: 24px;
                margin-right: 15px;
                width: 280px;
                text-align: left;
            }
            .blogger-url{
                font-size: 20px;
            }
        }
    }
  }
}
</style>